<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容页</title>

    <link rel="stylesheet" type="text/css" href="./css/home.css">
    <link rel="stylesheet" type="text/css" href="./css/article.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="banner"></div>
    <div class="box">
        <div class="banner_mask">
            <img src="./img/logo.png" style="position: relative;width: 70px;top: 90px;left: 50%;transform: translateX(-50%);">
        </div>
        <div class="nav">
            <ul>
                <li><a href="#" class="navSelected">首页</a></li>
                <li><a href="#">论坛</a></li>
                <li><a href="#">快捷手册</a></li>
                <li><a href="#">中文文档</a></li>
                <li><a href="#">下载</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </div>
        <div class="main">
            <div class="main_box">
                <div class="content">
                    <div class="content_box" v-for="item in articleResult">
                        <p class="pTitle">{{item.title}}</p>
                        <p class="form">作者：<span style="color: #e67e22">{{item.author}}</span> · {{item.createTime}}</p>
                        <p class="contentText">{{item.introduction}}</p>
                        <h2>实例做法</h2>
                        <div class="contentText" v-html="item.content"></div>
                        <hr class="delimiter">
                        <div class="contentText" v-html="item.toSumUp"></div>
                        <hr class="delimiter">
                        <div class="contentText" v-html="item.provenance"></div>
                        <hr class="endHr">
                        <span style="color: #959595;font-size: 14px;padding-left: 40px;position:relative;top: 55px">{{item.label}}</span>
                    </div>
                    <div class="content_box" style="padding-bottom: 0px">
                        <img style="margin-top: 40px;margin-left: 40px;" src="./img/logo1.png">
                        <p style="font-size: 20px;position:relative;left: 145px;top: -80px">关于作者<span class="spanLabel"> 王赛</span></p>
                        <p style="color: #959595;font-size: 14px;position:relative;top: -70px;left: 145px">北京<span class="spanLabel" style="margin-left: 10px">个人网站/博客</span></p>
                    </div>
                    <div class="download" style="width: 230px;position:relative;left: -120px">< Ghost 1.0 版本正式发布</div>
                    <div class="download" style="width: 230px;position:relative;left: 120px;top: -40px">自定义文章摘要（Excerpt） ></div>
                </div>
                <div class="side">
                    <div class="side_box">
                        <div class="pTitleS"><span>社区</span></div>
                        <p>QQ群：277327792</p>
                        <p style="color: #e67e22">问答社区</p>
                        <p style="color: #e67e22">官方微博</p>
                    </div>
                    <div class="side_box">
                        <div class="pTitleS"><span>下载 Ghost</span></div>
                        <div class="download">Ghost 中文版（0.7.4）</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data() {
            return {
                result: [
                    {
                        id: 0,
                        title: "自定义文章摘要（ Excerpt ）",
                        author: "王赛",
                        createTime: "2017年8月9日",
                        introduction: "随着 Ghost 1.0 和 Hemingway Mode 的发布，今天我们又发布了“自定义文章摘要”功能。 默认情况下，Ghost 会截取文章正文开头部分的文字（一般是55个字）作为文章摘要并显示在文章归档列表中。摘要有助于读者快速了解文章所要表达的内容。但是，如果你希望自己定义。",
                        content: "<p>使用默认的 <span class='spanCode'>{{ tags }}</span> 助手将展示出所有标签的列表，并且链接到它们各自对应的分类页面： <span class='spanLabel'>News</span>、<span class='spanLabel'>Design</span>、<span class='spanLabel'>Architecture</span></p>" +
                            "<p>如果你只是希望输出首要标签并且为其创建一个特殊的链接，你可以在 Casper 2.0 主题中使用如下代码实现：</p>" +
                            "<p>这种方式不但仍然可以让你自由地使用标签并为博文建立互相之间的关系，并且在前端页面上保留了一个类似分类的整洁输出。</p>" +
                            "<p>希望这一功能能够给你开发主题时提供一些帮助和灵活性。如果你希望了解更多有趣的功能，请访问我们的文档网站：<span class='spanLabel'>http://themes.ghost.org/</span> 。</p>",
                        toSumUp: "这一功能包含在 <span class='spanWeight'>Ghost 1.2.0</span> 版本中。在自己的服务器上托管 Ghost 的用户可以利用 <span class='spanLabel'>Ghost-CLI</span> 中的 <span class='spanCode'>$ ghost update</span> 命令升级到 <span>最新版本</span>。Ghost(Pro) 用户将很快自动获得这一更新。",
                        provenance: "原文出处：<span class='spanLabel'><a class='provenanceHref'>https://dev.ghost.org/primary-tags/</a></span>",
                        label: "主题，助手函数"
                    },{
                        id: 1,
                        title: "首要”标签“",
                        author: "王赛",
                        createTime: "2017年8月9日",
                        introduction: "在 Ghost 中，每一篇博文都可以有多个标签（tag），并且这些标签的排列顺序也被 Ghost 完整保存。第一个标签被认为是最重要的，因此被特殊对待。",
                        content: "<p>使用默认的 <span class='spanCode'>{{ tags }}</span> 助手将展示出所有标签的列表，并且链接到它们各自对应的分类页面： <span class='spanLabel'>News</span>、<span class='spanLabel'>Design</span>、<span class='spanLabel'>Architecture</span></p>" +
                            "<p>如果你只是希望输出首要标签并且为其创建一个特殊的链接，你可以在 Casper 2.0 主题中使用如下代码实现：</p>" +
                            "<p>这种方式不但仍然可以让你自由地使用标签并为博文建立互相之间的关系，并且在前端页面上保留了一个类似分类的整洁输出。</p>" +
                            "<p>希望这一功能能够给你开发主题时提供一些帮助和灵活性。如果你希望了解更多有趣的功能，请访问我们的文档网站：<span class='spanLabel'>http://themes.ghost.org/</span> 。</p>",
                        toSumUp: "这一功能包含在 <span class='spanWeight'>Ghost 1.2.0</span> 版本中。在自己的服务器上托管 Ghost 的用户可以利用 <span class='spanLabel'>Ghost-CLI</span> 中的 <span class='spanCode'>$ ghost update</span> 命令升级到 <span>最新版本</span>。Ghost(Pro) 用户将很快自动获得这一更新。",
                        provenance: "原文出处：<span class='spanLabel'><a class='provenanceHref'>https://dev.ghost.org/primary-tags/</a></span>",
                        label: "主题，助手函数"
                    },{
                        id: 2,
                        title: "Node.js v4 LTS 成为 Ghost 推荐版本",
                        author: "王赛",
                        createTime: "2017年8月9日",
                        introduction: "从这周起，我们将 Ghost 推荐 Node.js 版本升级为 Node.js v4 LTS。我们这样做汽是已经落后于计划了。然而，经过大量测试之后，我们确信 Ghost 可以在 Node.js v4 平台上流畅的运行并且内存消耗比原来也减少了。目前，Ghost(Pro)上托管。",
                        content: "<p>使用默认的 <span class='spanCode'>{{ tags }}</span> 助手将展示出所有标签的列表，并且链接到它们各自对应的分类页面： <span class='spanLabel'>News</span>、<span class='spanLabel'>Design</span>、<span class='spanLabel'>Architecture</span></p>" +
                            "<p>如果你只是希望输出首要标签并且为其创建一个特殊的链接，你可以在 Casper 2.0 主题中使用如下代码实现：</p>" +
                            "<p>这种方式不但仍然可以让你自由地使用标签并为博文建立互相之间的关系，并且在前端页面上保留了一个类似分类的整洁输出。</p>" +
                            "<p>希望这一功能能够给你开发主题时提供一些帮助和灵活性。如果你希望了解更多有趣的功能，请访问我们的文档网站：<span class='spanLabel'>http://themes.ghost.org/</span> 。</p>",
                        toSumUp: "这一功能包含在 <span class='spanWeight'>Ghost 1.2.0</span> 版本中。在自己的服务器上托管 Ghost 的用户可以利用 <span class='spanLabel'>Ghost-CLI</span> 中的 <span class='spanCode'>$ ghost update</span> 命令升级到 <span>最新版本</span>。Ghost(Pro) 用户将很快自动获得这一更新。",
                        provenance: "原文出处：<span class='spanLabel'><a class='provenanceHref'>https://dev.ghost.org/primary-tags/</a></span>",
                        label: "主题，助手函数"
                    }
                ],
                articleResult: []
            }

        },
        created() {
            let url = window.location.search.split("=");
            let id = url[1]
            this.articleResult.push(this.result[id])
        },
        methods: {

        }
    })
</script>
</html>